<template>
  <img id="talk_logo" src="../assets/talk.png">
  <div id="to_login">

    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="username" name="账号" left-icon="friends-o" label="账号" placeholder="登录账号"
          :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field v-model="password" type="password" name="密码" label="密码" left-icon="goods-collect-o"
          placeholder="登录密码" :rules="[{ required: true, message: '请填写密码' }]" />
      </van-cell-group>

      <!-- <div class="kaiguan">
        <van-switch v-model="switchValue" @change="onSwitchChange" />
      </div> -->

      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit" @click="TOLOGIN">
          登录
        </van-button>

      </div>
    </van-form>
    <span id="forget" @click="forget_password">忘记登录密码</span>
  </div>

</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import http from '@/http';
import axios from 'axios';
import { showToast } from 'vant';
const router = useRouter();
const username = ref();
const password = ref();
let local_data = ref()
let local_d = ref()
const onSubmit = (values) => {
  console.log('submit', values);
};

function forget_password() {
  router.push('/reset')
}

function TOLOGIN() {
  axios({
    method: 'post',
    url: 'http://127.0.0.1:8000/userlogin/',
    data: {
      username: username.value,
      password: password.value
    }
  }).then((res) => {
    console.log(res.data)
    if (res.data.code == 200) {
      alert('登录成功')
      router.push('/toLogin')
      local_d = localStorage.setItem('username', username.value)
    } else {
      alert('登录失败')
    }
  }).catch((err) => {
    console.log(err)
  })
}


</script>
<style scoped>
#to_login {
  margin-top: 20px;
}

#talk_logo {
  margin-left: 30px;
  margin-top: 25px;
}

#forget {
  margin-left: 140px;
  margin-top: 100px;
  color: #1989fa;
  background-color: #fff;
  border: none;
  /* font-size: 12px; */
  font-weight: 500;
}
</style>